<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
    

		 <!-- 图表展示 -->
		 <div  id="hitsPerSecondContainer">
			 <div class="col-sm-12">
				 <div class="ibox float-e-margins">
					 <div class="ibox-content">
						 <div class="row">
							 <div class="col-sm-12">
								 <div id="hitsPerSecond" style="width: 100%;height:300px;"></div>
							 </div>

							 <div class="col-sm-12">
								 <div id="responseTime" style="width: 100%;height:300px;"></div>
							 </div>

							 <div class="col-sm-12">
								 <div id="tpsOverTime" style="width: 100%;height:300px;"></div>
							 </div>


							 <div class="col-sm-12">
								 <div id="errors" style="width: 100%;height:300px;"></div>
							 </div>

						 </div>
					 </div>

				 </div>
			 </div>
		 </div>

	</div>

    <div th:include="include :: footer"></div>
	 <script th:src="@{/js/echarts.min.js}"></script>
	 <script th:src="@{/js/jmeter/dashboard-commons.js}"></script>
	 <script th:src="@{/js/jmeter/hashtable.js}"></script>
	 <script th:src="@{/js/ws/sockjs.js}"></script>
	 <script th:src="@{/js/ws/stomp.js}"></script>

		 <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('jmeter:jmeterMetric:edit')}]];
        var removeFlag = [[${@permission.hasPermi('jmeter:jmeterMetric:remove')}]];
        var prefix = ctx + "jmeter/jmeterTestPlanMetric";
		var metridId =  [[${id}]];;

		var executing =  [[${executing}]];
		var interval = null;
		$(document).ready(function () {
			let baseOption = basOption();

			if(!executing){
				renderGraph(baseOption);
			}else {
				interval = setInterval(function () {

					console.log("running in the interval time="+new Date())

					renderGraph(baseOption);

				},1000);

			}

		});



		function renderChartByData(resp, hitsPerSecondChart, baseOption, responseTimeChart, tpsChart, errorChart) {
			let charts = resp['charts'];

			let activeThreads = charts['activeThreads'];
			let responseTimeOverTime = charts['responseTimeOverTime'];
			let tpsOverTime = charts['tpsOverTime'];
			let errors = charts['errors'];
			let hitsPerSecond = charts['hitsPerSecond'];


			renderChart('hitsPerSecond', hitsPerSecondChart, activeThreads, hitsPerSecond, 'active threads', 'hitsPerSecond', baseOption);
			renderChart('responseTimeOverTime', responseTimeChart, activeThreads, responseTimeOverTime, 'active threads', 'Response time', baseOption);
			renderChart('tpsOverTime', tpsChart, activeThreads, tpsOverTime, 'active threads', 'tps', baseOption);
			renderChart('errors', errorChart, activeThreads, errors, 'active threads', 'errors', baseOption);
		}

		function renderGraph(baseOption) {

			// 基于准备好的dom，初始化echarts实例
			let hitsPerSecondChart = echarts.init(document.getElementById('hitsPerSecond'));
			let responseTimeChart = echarts.init(document.getElementById('responseTime'));
			let tpsChart = echarts.init(document.getElementById('tpsOverTime'));
			let errorChart = echarts.init(document.getElementById('errors'));


			$.get(prefix+'/getGraphData?id='+metridId, function (resp) {

				if($.isEmptyObject(resp['charts'])){
					return;
				}


				executing=resp['isRunning'];
				renderChartByData(resp, hitsPerSecondChart, baseOption, responseTimeChart, tpsChart, errorChart);

				if(!executing && interval!=undefined){
					clearInterval(interval);
				}
			}, 'json')
		}




		function renderChart(title,chart,lineA,lineB,y1Name,y2Name,baseOption ) {
			let legendsAndSeries = createLegendsAndSeries(lineA,lineB);

			let option=getChartOption(title,legendsAndSeries.legends,legendsAndSeries.series,
					cell(lineA['maxY']),cell(lineB['maxY']),
					y1Name,y2Name,baseOption);

			chart.setOption(option);

		}


		function createLegendsAndSeries(lineAData,lineBData) {

			prepareSeries(lineAData);

			prepareSeries(lineBData);


			let seriesArr=[];
			let legends=[];

			lineAData.lines.forEach(function (line ) {
				let item = {
					name: line.label,
					type: 'line',
					symbolSize: 0,
					data : line.points
				};


				legends.push(line.label);
				seriesArr.push(item);
			});

			lineBData.lines.forEach(function (line) {
				let item = {
					name: line.label,
					type: 'line',
					symbolSize: 0,
					data : line.points
				};

				item.yAxisIndex=1,
				legends.push(line.label);
				seriesArr.push(item);

			});

			return {'series':seriesArr,'legends':legends}

		}


		function getChartOption(title,legends,series,y1Max,y2Max,y1Name,y2Name,baseOption) {

			baseOption.legend={data:legends};
			baseOption.yAxis=[
				{
					type: 'value',
					name: y1Name,
					min: 0,
					max: y1Max,
					interval: y1Max/5
				},
				{
					type: 'value',
					name: y2Name,
					min: 0,
					max: y2Max,
					interval: y2Max/5
				}
			];
			baseOption.series = series ;
			baseOption.title.text = title ;


			return baseOption;

		}


		function basOption() {

			let baseOption = {
				title: {
					text: 'title',
					textStyle: {
						fontSize: 20,
						fontStyle: "italic",
						fontWeight: "lighter",
						fontFamily: "monospace",
						color: "rgba(73, 127, 177, 1)"
					}
				},

				toolbox: {
					feature: {
						dataView: {show: true, readOnly: false},
						restore: {show: true},
						saveAsImage: {show: true}
					}
				},

				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				xAxis: {
					type: 'time',
				}

			};

			return baseOption;


		}





		function cell(max) {
			return Math.ceil(max / 4.5) * 5;
		}


    </script>
</body>
</html>